import React, { useEffect, useRef } from 'react'
import '../test.css'
import { dragger as makeDraggable } from '../tools'

function ItemInfo(props) {
  const refTip = useRef(null)
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('正在执行中')
    }, 1000)

    return () => {
      //清除副作用
      clearInterval(timer)
    }
  }, [])

  useEffect(() => {
    if (refTip.current) {
      makeDraggable(refTip.current)
    }
  }, [])

  return (
    // <div className='absoluteContent'>
    //     <span>{props.name}</span>
    // </div>
    <div
      className="tooltip"
      style={{ marginLeft: '100px' }}
      ref={refTip}
      id="tip"
    >
      <svg className="tooltip-arrow" viewBox="0 0 20 10">
        <polygon points="0,0 10,10 20,0" fill="#888" />
      </svg>
      {props.name}
    </div>
  )
}

export default ItemInfo
